<app-common-header [title]="'myAccount.add_bank_account.account_sms.title' | translate"></app-common-header>

<ion-content>
  <div>
    <form [formGroup]="accountForm">
      <ion-grid>
        <ion-row>
          <ion-col size="12">
            <ion-label>
              <ion-text color="" class="form_title">
                {{'myAccount.add_bank_account.account_sms.page_title' | translate}}
              </ion-text>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row class="input_bottom_color">
          <ion-col size="8">
            <ion-input placeholder="Code" type="number" 
            required="true" name="accountSms" formControlName="accountSms"></ion-input>
          </ion-col>
          <ion-col size="4">
            <ion-button size="small" fill="clear" class="btn_color ion-float-right" type="button" [hidden]="!sendView">
              {{'myAccount.add_bank_account.account_sms.resend_btn' | translate}} {{smsCountDown}} s
            </ion-button>
            <ion-button size="small" fill="clear" color="primary" (click)="sendAppVerificationCode()" class="btn_color ion-float-right" type="button" [hidden]="sendView">
              {{'myAccount.add_bank_account.account_sms.sende_btn' | translate}}
            </ion-button>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <ion-button  color="wathet" expand="full" [disabled]="!accountForm.valid" (click)="toNext()">
              {{'myAccount.add_bank_account.account_sms.submit_btn' | translate}}
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </form>
  </div>
</ion-content>
